$(function () {
    // 文档加载

    // 需求5：设计一个函数，接受一个行对象，计算总价格，并赋值页面
    // 实现：1.根据传入的jq对象向下查找3个东西
    // 2. .sPrice是单价,  .proNum是数量   .singlePrice是行小计
    // 3. 计算行小计： .sPrice是单价 * .proNum是数量
    // 4. 将结果放到 => .singlePrice是行小计
    function cal($tr) {
        // $tr.closest // 向上
        let price = $tr.find('.sPrice').text();
        //    console.log(price);
        let num = $tr.find('.proNum').val();
        //    console.log(num);
        let $allPrice = $tr.find('.singlePrice');

        // 计算行小计
        let total = price * num;
        // 保留2位小数 
        total = total.toFixed(2);
        //    // 放值
        $allPrice.text(total)
    }
    // console.log($('tr:gt(0)').eq(0));
    // cal($('tr:gt(0)').eq(0))

     // 需求七：计算总金额和总件数
    // 思路：
    // 【设计一个函数】： 将这个函数给所有需要使用的地方调用
    // 加、减、删除、勾选： 前面所有的方法都需要计算
    // 函数功能：计算总金额和总件数
    // 函数实现思路：
    // 1. 声明计数器
    // 2. 遍历each所有勾选的行（商品） 需要if语句来判断
    // 3. 总件数 = 总件数 + 当前行件数     总价 = 总价 + 当前行 + 行小计
    // 4. 将总件数  和总价 放到页面上去
    // 5. 处理金额细节
    function calTotal () {
        let count = 0; // 件数
        let sumPrice = 0;  // 金额
        // 遍历
        $('tr').nextUntil('tr:last-child').each(function(index,tr) {
            let $input = $(tr).find('input.sinSel');
            let isChecked = $input.prop('checked');
            // 判断是否选中 如果选中，累加
            if (isChecked) {
                // 获取当前行件数
                let num = $(tr).find('.proNum').val();
                // 获取当前行小计
                let price = $(tr).find('.singlePrice').text();
                // 合计
                count = count + parseInt(num);
                sumPrice = sumPrice + parseFloat(price);
            }
        });
        // 将值放到页面上
        $('.allNum').text(count);
        $('.allPrice').text(sumPrice.toFixed(2));
    }



    // 需求1： 点击全选按钮，根据其属性checked 赋值所有的子选项
    // 实现: 
    $('.allSel').click(function () {
        // 1. 获取(全选)按钮 【接】
        // console.log($('.allSel'));
        let isAllCheck = $(this).prop('checked');
        console.log(isAllCheck);
        // 2. 获取该元素的 ckecked属性值 【化】
        // 3. 找到所有的(子选项)  将其属性值checked 赋值 【发】
        $('.sinSel').prop('checked', isAllCheck);
        calTotal();
    });

    // 需求2： 点击子选项后，检查子选项勾选数量是否等于 子选项全部数量
    // 实现：
    // 1. 绑定子选项点击事件
    $('.sinSel').click(function () {
        // 2. 获取选中项目总数 【接】
        let selected = $('.sinSel:checked').length;
        //  console.log(selected);
        // 3. 获取子选项总数【接】
        let all = $('.sinSel').length;
        // console.log(all);
        // 4. 对比以上总数是否一致 【化】
        let isAllChecked = (selected === all);
        // 5. 设置全选状态【发】
        $('.allSel').prop('checked', isAllChecked);
        calTotal();
    });

    // 需求3: 实现点击加号增加input的value加一
    // 实现:
    /**
     * 1. 获取.add元素
     * 2. 绑定该元素点击事件
     * 3. 【接】
     *  3.1: 接受当前a标签的prev找上一个兄弟 的value属性
     * 4. 【化】 将当前值进行加一，得到新的结果
     * 5. 【发】 将结果赋值给input的 value属性 
     */
    $('.add').click(function () {
        let value1 = $(this).prev().val();
        let newValue = parseInt(value1) + 1;
        $(this).prev().val(newValue);

        // 测试两种方式
        // let $tr = $(this).parent().parent();
        let $tr = $(this).closest('tr');
        // console.log(test);
        cal($tr);
        calTotal();
    });
    // 需求4: 实现点击加号增加input的value减一
    // 实现:
    /**
     * 1. 获取.reduce元素
     * 2. 绑定该元素点击事件
     * 3. 【接】
     *  3.1: 接受当前a标签的next找下一个兄弟 的value属性
     * 4. 【化】 将当前值进行加一，得到新的结果
     * 5. 【发】 将结果赋值给input的 value属性 
     */
    $('.reduce').click(function () {
        let value1 = $(this).next().val();
        console.log('当前值:' + value1);
        if (value1 == 0) {
            // 结束代码不返回值
            return;
        }
        console.log('正在执行....');
        //    console.log(value1);
        let newValue = parseInt(value1) - 1;
        $(this).next().val(newValue);

        let $tr = $(this).parent().parent();
        cal($tr);
        calTotal();
    })
    // 需求六：点击删除按钮，删除当前行元素
    // 实现步骤: 1. 通过 大于0的部分tr  tr:gt(0)
    // 2. 删除最后一个元素
    // 3. 查找里面最后一个td:last 
    // 3.5：绑定点击事件
    // 4:向上查找元素 找到tr
    // 5:删除该元素
    // let $tr = $('tr:gt(0)');
    // // 返回的数组具备数组函数
    // $tr.splice($tr.length-1,1)
    // // console.log($tr);
    // let $td = $tr.find('td:last-child');
    // console.log($td)
    // $td.click(function () {
    //     if ( confirm('真的删除吗？') ) {
    //         $(this).parent().remove();
    //     }       
    // })
    // 方法二
 // 需求六：点击删除按钮，删除当前行元素
    // 实现步骤:
    // 1. 通过 大于0的 且不是最后一个元素的tr
    // $('tr').nextUntil('tr:last-child')
    // 2：绑定点击事件
    // 3:向上查找元素 找到tr
    // 4:删除该元素
    let $trs = $('tr').nextUntil('tr:last-child');
    // console.log($trs)
    $trs.find('td:last-child').click(function () {
       if ( confirm('真的删除吗？') ) {
            $(this).parent().remove();
            calTotal();
        }       
    })
    // 方法三
    // console.log($('tr td:last-child:contains(删除)'));

});